<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>

    window.onload = function (){
      //得到tr子元素集合
       var trArray = $("data").getElementsByTagName("tr");
       for(let i=0;i<trArray.length;i++){
         trArray[i].onclick = function (){
           trClick(this);
         }
       }
    }

    let colorTr = null;
    function trClick(trObj){
      if(colorTr != null){
         colorTr.style.backgroundColor = "white";
      }
      trObj.style.backgroundColor = "yellow";
      colorTr = trObj;

      $("delButton").disabled = false;

      //得到选中行的td子元素集合
      var tdArray = colorTr.getElementsByTagName("td");
      $("code").value = tdArray[0].innerHTML;
      $("name").value = tdArray[1].innerHTML;
      $("money").value = tdArray[2].innerHTML;
    }

    /**
     * 删除
     */
    function del(){
        //从父元素移除子元素
        // $("data").removeChild(colorTr);
      //将该元素从他的父元素中移除
      colorTr.remove();
        $("delButton").disabled = true;
    }

    /**
     * 得到指定ID对应的元素对象
     * @param id 元素的id
     * @returns {HTMLElement} 元素对象
     */
    function $(id){
      return document.getElementById(id);
    }

    /**
     * 添加
     */
    function add(){
      //创建tr对象
      let trObj = document.createElement("tr");

      //设置tr标签中间的文本
      trObj.innerHTML = "<td>"+$("code").value+"</td><td>"+$("name").value+"</td><td>"+$("money").value+"</td>";

      trObj.onclick = function (){
        trClick(this);
      }
      //在指定元素中添加子元素
      $("data").appendChild(trObj);
    }

    /**
     * 修改
     */
    function update(){
      var tdArray = colorTr.getElementsByTagName("td");
      tdArray[0].innerHTML = $("code").value;
      tdArray[1].innerHTML = $("name").value;
      tdArray[2].innerHTML = $("money").value;
    }

    /**
     * 删除所有
     */
    function delAll(){
      // $("data").innerHTML = "";
      var trArray = $("data").getElementsByTagName("tr");
      for(let i=0;i<trArray.length;i++){
        trArray[i--].remove();
      }
    }


  </script>
</head>
<body>
    <div style="display: flex;">
      <table border="1" width="50%" cellspacing="0">
          <thead><tr><th>工号</th><th>姓名</th><th>工资</th></tr></thead>

          <tbody id="data">
              <tr><td>003</td><td>张三</td><td>8800</td></tr>
              <tr><td>006</td><td>刘勇</td><td>7600</td></tr>
              <tr><td>008</td><td>朱军</td><td>9500</td></tr>
              <tr><td>004</td><td>何勋</td><td>6800</td></tr>
              <tr><td>005</td><td>周丽</td><td>4500</td></tr>
          </tbody>
      </table>

      <div style="width: 400px;margin-left: 50px;" id="opdiv">
        工号：<input type="text" id="code"><br>
        姓名：<input type="text" id="name"><br>
        工资：<input type="text" id="money"><br>
        <input type="button" value="添加" onclick="add()">
        <input type="button" value="删除" onclick="del()" id="delButton" disabled>
        <input type="button" value="修改" onclick="update()">
        <input type="button" value="删除所有" onclick="delAll()">
      </div>
    </div>
</body>
</html>
